<template>
  <div class="sub-category">
    <van-grid :gutter="10" column-num="3">
      <van-grid-item
        v-for="sub in subCategories"
        :key="sub.id"
        :icon="sub.imageUrl"
        :text="sub.title"
        :to="{path: '/list', query: {url: sub.url}}"
      />
    </van-grid>

    <!-- 推荐 -->
    <van-divider>大家都在逛</van-divider>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      v-if="list.length"
    >
      <van-grid :column-num="2" gutter="4" :border="false">
        <van-grid-item
          v-for="prod in list"
          :key="prod.id"
          :to="{name: 'detail', params: {id: prod.id}}"
        >
          <van-image :src="prod.image" />
          <div class="title van-ellipsis">{{prod.title}}</div>
          <div class="desc">
            <div class="price">￥{{prod.price}}</div>
            <div class="fee">
              <van-tag plain type="primary" v-if="prod.isFreePostage" color="#666">包邮</van-tag>
            </div>
          </div>
        </van-grid-item>
      </van-grid>
    </van-list>
  </div>
</template>

<script>
import { getSubCategories } from '@/api/category'
export default {
  name: 'SubCategory',
  data() {
    return {
      subCategories: [],
      list: [],
      loading: false,
      finished: false,
      nextIndex: 0,
      id: 0,
    }
  },
  // watch: {
  //   // // 监视当前激活路由的变化
  //   // $route(newRoute, oldRoute) {
  //   //   // 从路由参数中获取主分类 id
  //   //   const { id } = newRoute.params
  //   //   // console.log('主分类 id=', id)
  //   //   // 查询子分类数据
  //   //   getSubCategories(id)
  //   //     .then(data => {
  //   //       this.subCategories = data.categories
  //   //     })
  //   // },

  //   // 监视当前激活路由的变化
  //   $route: {
  //     // 监视到 $route 变化后调用 handler() 处理
  //     handler(newRoute) {
  //       // 从路由参数中获取主分类 id
  //       const { id } = newRoute.params
  //       this.id = id
  //       console.log('监视路由变化, id =', id)
  //       if (!id) {
  //         return
  //       }
  //       // console.log('主分类 id=', id)
  //       // 查询子分类数据
  //       getSubCategories(id)
  //         .then(data => {
  //           this.subCategories = data.categories
  //           const { list, nextIndex, isEnd } = data.items
  //           this.list = list
  //           this.nextIndex = nextIndex
  //           this.finished = isEnd
  //         })
  //     },
  //     // 组件初始渲染时，就立即调用 handler 处理
  //     immediate: true,
  //   },
  // },
  created() {
    // 创建组件实例时，加载数据，渲染子分类
    this.getData(this.$route)
  },
  activated() {
    // 判断路径参数 id 是否改变，如果改变，则查询新数据
    const { id } = this.$route.params
    if (Number(id) !== this.id) {
      this.getData(this.$route)
    }

    // 添加对 $route 变化的监听
    // 返回值是一个函数，可用于
    // 取消监听器
    this.unwatch = this.$watch('$route', (newRoute) => {
      this.getData(newRoute)
    })
  },
  deactivated() {
    // 调用 unwatch() 取消对路由变化的监听
    this.unwatch && this.unwatch()
  },
  // beforeRouteUpdate(to, from, next) {
  //   // console.log('subcategory beforeRouteUpdate...')
  //   next()
  // },
  methods: {
    // 加载数据
    getData(route) {
      // 从路由参数中获取主分类 id
      const { id } = route.params
      this.id = id
      // 查询子分类数据
      getSubCategories(id)
        .then(data => {
          this.subCategories = data.categories
          const { list, nextIndex, isEnd } = data.items
          this.list = list.filter(prod => prod.type === 1)
          this.nextIndex = nextIndex
          this.finished = isEnd
        })
    },
    onLoad() {
      getSubCategories(this.id, this.nextIndex)
        .then(data => {
          const { list, nextIndex, isEnd } = data.items
          this.list = [...this.list, ...list.filter(prod => prod.type === 1)]
          this.nextIndex = nextIndex
          this.finished = isEnd
          this.loading = false
        })
    },
  },
}
</script>

<style lang="less" scoped>
  .title, .desc {
    width: 250px;
  }

  .desc {
    display: flex;
    justify-content: space-between;
  }
</style>
